//评论组件
import React from "react";
import {IconMessage,IconBook} from "@arco-design/web-react/icon"
/**
 * 右侧面板文章选择组件
 * 
 */
export function RightArticle(){
    const articleList=[
        {
            src:'https://www.guitu18.com/usr/themes/handsome/assets/img/sj2/5.jpg',
            text:' 记一次事务失效的问题排查记录 '
        },
        {
            src:'https://www.guitu18.com/usr/themes/handsome/assets/img/sj2/10.jpg',
            text:'  SSH公钥登录和RSA非对称加密  '
        },
        {
            src:'https://www.guitu18.com/usr/themes/handsome/assets/img/sj2/2.jpg',
            text:'  新版博客系统全新上线，发文记录一下  '
        },
        {
            src:'https://www.guitu18.com/usr/themes/handsome/assets/img/sj2/1.jpg',
            text:'  Shiro权限管理框架（二）：Shiro结合Redis实现分布式或集群环境下的Session共享  '
        },
        {
            src:'https://www.guitu18.com/usr/themes/handsome/assets/img/sj2/4.jpg',
            text:'   通过Shell脚本以FTP方式上传文件到虚拟主机实现Hexo博客自动发布   '
        }
    ]
    return (
        <>
            {
                articleList.map((item)=>{
                    return <div className="rightArticleContainer">
                    <div className="rightArticleAvatar">
                        {/*<IconBook className="articleIcon"></IconBook>*/}
                        <img className="avatarImage" src={item.src}/>
                    </div>
                    <div className="rightArticleContent">
                        <div className="rightArticleTitle">{item.text}</div>
                        <div style={{width:'100px',display:'flex',color:'var(--colorText-2',height:'25px'}}>
                            <IconMessage style={{color:'var(--colorText-2)',height:'25px',margin:'0'}}/>
                            <div className="rightArticleNumber">{26}</div>
                        </div>
                    </div>
                </div>
                })
            }
        </>
    )
}